<template>
  <div class="analysis">
    <div class="header">
      <pageHeader title="数据分析"/>
    </div>
    <div class="content">
      <div class="content-item">
        <div class="line-header">客户分析</div>
        <div class="flex-row flex-justify-between">
          <ve-line :data="chartData" :settings="chartSettings" width="90%"></ve-line>
          <div class="flex-column flex-justify-start flex-justify-center left-box">
            <div class="flex-row flex-align-center">
              <img class="icon-line" src="../../assets/images/icon-users.png" alt>
              <div class="flex-column flex-align-center">
                <p>66</p>
                <p>客户数</p>
              </div>
            </div>
            <div class="flex-row flex-align-center">
              <img class="icon-line" src="../../assets/images/icon-line.png" alt>
              <div class="flex-column flex-align-center">
                <p>66</p>
                <p>平均增长率</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-item">
        <div class="line-header">机器分析</div>
        <div class="flex-row flex-justify-between">
          <ve-line :data="chartData" :settings="chartSettings" width="90%"></ve-line>
          <div class="flex-column flex-justify-start flex-justify-center left-box">
            <div class="flex-row flex-align-center">
              <img class="icon-line" src="../../assets/images/icon-m.png" alt>
              <div class="flex-column flex-align-center">
                <p>66</p>
                <p>机器数</p>
              </div>
            </div>
            <div class="flex-row flex-align-center">
              <img class="icon-line" src="../../assets/images/icon-line.png" alt>
              <div class="flex-column flex-align-center">
                <p>66</p>
                <p>平均增长率</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-item">
        <div class="line-header">收益分析</div>
        <div class="flex-row flex-justify-center flex-align-center picker-box">
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
          <el-button>搜索</el-button>
        </div>
        <div class="flex-row flex-justify-between">
          <ve-line :data="chartData" :settings="chartSettings" width="90%"></ve-line>
          <div class="flex-column flex-justify-start flex-align-start left-box">
              <div class="box-header flex-row flex-justify-center flex-align-center">
                  <img class="icon-line" src="../../assets/images/icon-glod.png" alt="">
                  <p>收益排行榜</p>
              </div>
              <div class="ranking">
                 <div>1.佲家智微科技有限公司</div>
                 <div>2.智行合创科技有限公司</div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pageHeader from "@/components/pageHeader/index";
export default {
  props: {},
  data() {
    this.chartSettings = {
      "xAxis.0.axisLabel.rotate": 45
    };
    return {
      chartData: {
        columns: ["时间", "客户数","服务费分成"],
        rows: [
          { 时间: "00:00", 客户数: 6 ,服务费分成:10},
          { 时间: "02:00", 客户数: 16 ,服务费分成:10},
          { 时间: "04:00", 客户数: 26 ,服务费分成:20},
          { 时间: "06:00", 客户数: 36 ,服务费分成:20},
          { 时间: "08:00", 客户数: 46 ,服务费分成:20},
          { 时间: "10:00", 客户数: 56 ,服务费分成:20},
          { 时间: "12:00", 客户数: 66 ,服务费分成:20},
          { 时间: "14:00", 客户数: 47 ,服务费分成:20},
          { 时间: "16:00", 客户数: 76 ,服务费分成:20},
          { 时间: "18:00", 客户数: 83 ,服务费分成:20},
          { 时间: "20:00", 客户数: 96 ,服务费分成:20},
          { 时间: "22:00", 客户数: 106 ,服务费分成:20},
          { 时间: "24:00", 客户数: 112 ,服务费分成:20}
        ]
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value2: ''
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {
    pageHeader
  }
};
</script>

<style scoped lang="less">
.analysis {
  background: #ccc;
  padding: 20px 40px;
  .content {
    padding: 20px 40px;
    background: #fff;
    margin-top: 20px;
    box-sizing: border-box;
    .line-header {
      font-size: 20px;
      color: #ff7d31;
      border-bottom: 1px solid #ff7d31;
      padding: 15px 0;
      margin-bottom: 15px;
    }
    .picker-box{
        margin: 25px 0;
        .el-button{
            margin-left: 20px;
        }
    }
    .left-box {
      width: 10%;
      div {
        font-size: 24px;
        div {
          margin-bottom: 15px;
        }
        p {
          margin-left: 20px;
        }
        p:nth-child(2) {
          font-size: 16px;
        }
      }
      .ranking{
          margin: 10px 0 0 0;
          div{

              font-size: 14px;
          }
      }
    }
    .icon-line {
      width: 40px;
      height: 40px;
    }
  }
}
</style>
